<template>
  <view class="fixtop">
	  <view class="" :style="{height:getstateheight()+'px'}"></view>
	  <view class="toptitle" :style="{height:gettitileheight()+'px'}">
		  <view style="width:50rpx;" class="iconfont icon-fanhui" @click="back"></view>
		  <view class="">我的房源</view>
		  <view style="width:50rpx;" class=""></view>
	  </view>
  </view>
  <view class="" :style="{height}"></view>
  <view class="buttom">
	  <view class="title">
	  	    <view class="" v-for="(i,index) in tititem" :key="i" :class="{active:currentindex==index}" @click="changeindex(index)">{{i}}</view>
	  </view>
	  <view class="con">
	  	    <swiper :touchable="false" :current="currentindex">
	  	    	<swiper-item v-for="i in tititem" :key="i" @touchmove.stop>
	  	    		  <scroll-view scroll-y="true" >
	  	    		  	<view class="swiper-item" v-for="(i,index) in showdata" :key="i.id">
							<MyhosecardVue :data="i" @cxdata="cxdata"/>
						</view>
						<view class="" style="height: 100rpx;"></view>
	  	    		  </scroll-view>
	  	    	</swiper-item>
	  	    </swiper>
	  </view>
  </view>
</template>

<script setup>
	import {computed, ref} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
		import {getstateheight,gettitileheight} from '@/utils/getinfo.js'
		import {getmyselfhose} from '@/api/index.js'
		import MyhosecardVue from '../../components/myhosecard/myhosecard.vue';
		const height=getstateheight()+gettitileheight()+'px'
		const tititem=['全部',"未出租","已出租","已下架"]
		const currentindex=ref(0)
		const myhosedata=ref([])
		onLoad(()=>{
			getmy()
		})
		const cxdata=data=>{
			    const hose= myhosedata.value.find(e=>e.id==data.id)
				 hose.ishas=data.staus
				 hose.updatedAt=new Date()
		}
		const back=()=>{
			uni.navigateBack()
		}
		const changeindex=e=>{
			currentindex.value=e
		}
			const getmy=async()=>{
				const rudata=await getmyselfhose()
				myhosedata.value=rudata.data
				console.log(rudata)
			}
	    const showdata=computed(()=>{
			    if(currentindex.value==0)return myhosedata.value
			   return myhosedata.value.filter(e=>e.ishas==currentindex.value)
		})
</script>

<style lang="scss" scoped>
	.active{
		position: relative;
		color: #000;
		font-weight: 600;
		&::after{
			content: "";
			position: absolute;
			bottom: -12rpx;
			left: 50%;
			transform: translate(-50%);
			height: 6rpx;
			width:55%;
			border-radius: 6rpx;
			background-color: #fea31c;
		}
	}
	.fixtop{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #f7f7f7;
		.toptitle{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 25rpx;
			padding: 0 25rpx;
			.iconfont{
				font-size: 25rpx;
			}
		}
	}
	.buttom{
		width: 100%;
		padding: 0 25rpx;
		background-color: #f7f7f7;
	}
	.title{
		height: 80rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 25rpx;
		color: #7b7b7b;
	}
	.con{
		height: calc(100vh - v-bind(height) - 80rpx);
		swiper{
			   height: 100%;
			   width: 100%;
			box-sizing: border-box;
			swiper-item{
				height: 100%;
				width: 100%;
				box-sizing: border-box;
				scroll-view{
					height: 100%;
					width: 100%;
					box-sizing: border-box;
					.swiper-item:first-child{
						margin-top: 10rpx;
					}
					.swiper-item{
						width: 98%;
						height: 400rpx;
						border-radius: 20rpx;
						margin:0 auto 20rpx auto;
						background-color: #fff;
						box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.09);
					}
				}
			}
		}
	}

</style>
